<template>
    <div @click="goInstitutions">
        <div id="equipment" style="height: 184px;width: 100%"></div>
        <div class="user-option">
            <div v-for="(item, key) in dataOption" :key="key">
                <p>{{item.label}}</p>
                <p>{{item.value}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import elementResizeDetectorMaker from 'element-resize-detector';
    var erd = elementResizeDetectorMaker(); //创建实例
    export default {
        name: "equipment-chart",
        data() {
            return {
                dataOption: [
                    {label: '已使用', value: '3000'},
                    {label: '未使用', value: '200'},
                ],
                chart: null,
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            goInstitutions() {
                // this.$router.push('/UserManagement/dataMonitoring')
                this.$router.push('/equipment')
            },
            init() {
                var  option = {
                    title: {
                        show: true,
                        text: '设备数量',
                        subtext: '3200',
                        top: 70,
                        x: 'center',
                        y: 'center',
                        textAlign: 'left',
                        z: 0,
                        textStyle: {
                            fontSize: '12',
                            color: '#979797',
                            fontWeight: 'normal'
                        },
                        subtextStyle: {
                            fontSize: '20',
                            fontWeight: 'bold',
                            color: '#333',
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}'
                    },
                    color: ['#3c90f7', '#55bfc0'],
                    grid:{
                        x:10,
                        y:10,
                        x2:10,
                        y2:10,
                    },
                    series: [
                        {
                            name: 'from',
                            type: 'pie',
                            radius: ['70%', '90%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            textAlign: 'center',
                            label: {
                                normal: {
                                    // 此处重点，设置为显示
                                    show: true,
                                    position: 'center',
                                    formatter: '{b}\n{c}',
                                    align: 'center',
                                    verticalAlign: 'middle',
                                    // 此处重点，字体大小设置为0
                                    textStyle: {
                                        fontSize: '0'
                                    }
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '20',
                                        fontWeight: 'bold'
                                    },
                                    // 同步样式
                                    formatter: function (params) {
                                        return `{tTitle|${params.name}}\n{tSubTitle|${params.value}}`
                                    },
                                    rich: {
                                        tTitle: {
                                            fontSize: '14',
                                            fontWeight: 'bold',
                                            lineHeight: '25'
                                        },
                                        tSubTitle: {
                                            fontSize: '20',
                                            fontWeight: 'bold',
                                            lineHeight: '25'
                                        }
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 635, name: '已使用'},
                                {value: 310, name: '未使用'},
                            ]
                        }
                    ]
                };
                // 基于准备好的dom，初始化echarts实例
                this.chart = this.$echarts.init(document.getElementById('equipment'));
                this.chart.on('mouseover', { seriesName: 'from' }, () => {
                    this.chart.setOption({
                        title: {
                            show: false
                        }
                    })
                })
                this.chart.on('mouseout', { seriesName: 'from' }, () => {
                    this.chart.setOption({
                        title: {
                            show: true
                        }
                    })
                })
                // 使用刚指定的配置项和数据显示图表。
                this.chart.setOption(option);
                setTimeout(() => {
                    window.onresize =  () => {
                        this.chart.resize();
                    }
                },200);
                //监听id为box的元素
                erd.listenTo(this.$el,()=>{
                    this.chart.resize();
                });
            }
        },
        beforeDestroy(){
            erd.uninstall(this.$el);
        },
    }
</script>

<style scoped lang="less">
    .user-option {
        display: flex;
        margin: 0px 0 30px 0;

        div {
            flex: 1;

            p {
                margin: 0;
                padding: 0;
                color: rgba(153, 153, 153, 1);
                font-size: 14px;
                text-align: center;

                &:last-child {
                    color: rgba(80, 80, 80, 1);
                    font-size: 30px;
                }
            }
        }
    }
</style>
